<template>
  <div class="container">
    <br><br>
    <el-button type="primary" @click="handlerAdd">添加用户</el-button>
    <div class="user-table">
          <el-table :data="userList" style="width: 100%">
          <el-table-column prop="sno" label="学号" width="80" />
          <el-table-column prop="sname" label="姓名" width="80" />
          <el-table-column prop="ssex" label="性别" />
          <el-table-column prop="birthday" label="生日" width="180" />
          <el-table-column prop="sclass" label="班级" width="180" />
          <el-table-column label="头像" >
             <template #default="scope">
                  <el-avatar :size="50" :src="scope.row.avatarUrl" />
             </template>
          </el-table-column>
          <el-table-column  label="操作">
               <template #default="scope">
                  <el-button size="small" @click="handlerEdit(scope.row)">
                    编辑
                  </el-button>
                  <el-button size="small" type="danger" @click="deleteUser(scope.row.id)" >
                    删除
                  </el-button>
               </template>
          </el-table-column>
        </el-table>
    </div>
     

    <!--用户编辑表格-->
    <el-dialog
          v-model="dialogVisible"
          :title="dialogTitle"
          width="500"
        >
        

         <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="user"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon>
            <el-form-item label="姓名" prop="sname">
                <el-input v-model="user.sname" />
            </el-form-item>
            <el-form-item label="性别" prop="ssex">
              <el-radio-group v-model="user.ssex">
                <el-radio value="0">男</el-radio>
                <el-radio value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
              <el-input v-model="user.birthday" />
            </el-form-item>
            <el-form-item label="班级" prop="sclass">
              <el-input v-model="user.sclass" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="user.name" />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="user.age" />
            </el-form-item>
        </el-form>



          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="saveUser">
                 确定
              </el-button>
            </div>
          </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { onMounted,ref } from "vue";
import { ElMessage,ElMessageBox } from 'element-plus'

    const dialogTitle = ref('编辑用户')

    //用户编辑页面是否显示
    const dialogVisible = ref(false)

    //操作类型  add：添加； update:修改
    const optionType = ref('')

    const user = ref(
        {
          sno: "",
          sname: "",
          ssex: "",
          birthday: "",
          sclass: "0",
          name: "",
          age:""
        
      },
    )

    const userList = ref([]);

    //保存用户数据
    const saveUser = () =>{
         let url = "" ;
         let methodName = '' ;
         if(optionType.value == 'add'){
            url ="http://localhost:8080/student/findAll" ;
            methodName = 'post' ;
         }else if(optionType.value == 'edit'){
             url ="http://localhost:8080/student/findAll"+user.value.id ;
             methodName = 'put' ;
         }
         fetch(url,{
              method:methodName,
              headers:{
                 'Content-Type':'application/json'
              },
              body: JSON.stringify(user.value)
        })
             .then( res => res.json())
             .then( res => {
                 ElMessage({
                  message: '用户信息修改成功',
                  type: 'success',
                })
                 dialogVisible.value = false ;
             })
    }

    //删除用户

    const deleteUser = id =>{

         ElMessageBox.confirm(
          '用户删除后不能恢复，是否确认删除?',
          '删除用户',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
             //单击了确认删除按钮
             handlerDel(id)
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消了操作',
            })
          })

    }
    
    const handlerDel = id =>{
         fetch("http://localhost:8080/student/findAll"+id,{
              method:"delete"        
        })
             .then( res => res.json())
             .then( res => {
                 ElMessage({
                  message: '用户信息删除成功',
                  type: 'success',
                })
                 selectAllUsers();
             })
    }

    //编辑用户
    const handlerEdit = row =>{
        user.value = row
        optionType.value = 'edit'
        dialogTitle.value = '编辑用户'
        dialogVisible.value = true
    }

    //查询所有用户
    const selectAllUsers = () =>{
        fetch("http://localhost:8080/findAll",{
            method: 'GET',
            mode: 'cors'
            
        })
             .then( res => res.json())
             .then( res => userList.value = res.data)
    }

    //添加用户
    const handlerAdd = () =>{
        user.value = {}
        optionType.value = 'add'
        dialogTitle.value = '添加用户'
        dialogVisible.value = true ;
    }

    //查询数据的函数
    onMounted(() => {
       selectAllUsers();
    })
</script>
<style scoped>
    .container{
      text-align: center;
    }

    table{
        border-collapse: collapse;
        border: 1px solid rgb(8, 8, 8);
        display: inline-block;
    }

    .user-table{
       width: 80%;
       margin: 0 auto;
    }

</style>
